<template>
  <a-popover trigger="click" placement="bottomLeft" :autoAdjustOverflow="true" :arrowPointAtCenter="true"
    @visibleChange="handleHoverChange" :overlayStyle="{ width: '400px', top: '50px', right: '0px' }">
    <template slot="content">
      <div class="notice-title">
        <span class="main-title">消息通知</span>
        <span class="btn-text" @click="readAll">全部标记已读</span>
      </div>
      <a-spin :spinning="loadding">
        <div class="notice-title" style="display:block;padding-top: 12px">
          <div class="notice-tag" :class="currentType == type.value ? 'active-type' : ''" v-for="(type, i) in noticeTypes" :key="i" @click="changeType(type.value)">{{type.text}}</div>
        </div>
        <div class="notice-cont-wrap">
          <div class="notice-cont" v-for="item in noticeList" :key="item.id">
            <div class="notice-cont-tit"><span class="btn-text" @click="goDetail(item)">{{item.topic}}</span> <span class="notice-cont-text">{{item.createTime}}</span></div>
            <div class="notice-cont-text" v-html="item.message"></div>
          </div>
        </div>
        <div style="margin-top: 5px;text-align: center">
          <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>
        </div>
      </a-spin>
    </template>
    <span class="header-notice">
      <a-badge :count="msgTotal">
        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
      </a-badge>
    </span>
  </a-popover>
</template>

<script>
import store from '@/store/'
import {getRoute} from '@/api/login'
import {getDictItemsFromCache} from '@/api/api'

export default {
  name: 'HeaderNotice',
  components: {
  },
  data() {
    return {
      loadding: false,
      url: {
        getPageList: '/sys/mgtNotice/getPageList?queryFlag=2',
        getNoticeNum: '/sys/mgtNotice/getNoticeNum',
        updateStatus: '/sys/mgtNotice/updateStatus',
        readAll: '/sys/mgtNotice/readAll',
      },
      msg1Title: '通知(0)',
      stopTimer: false,
      msgTotal: 0,
      myTimer: null,
      noticeList: [],
      noticeTypes: [],
      currentType: ''
    }
  },
  mounted() {
    // 获取字典值
    this.noticeTypes = [{
      value: '',
      title: '全部',
      text: '全部'
    }]
    this.noticeTypes = this.noticeTypes.concat(getDictItemsFromCache('notice_type') || [])
    this.loadData()
    this.timerFun();
  },
  destroyed: function () {
    // 离开页面生命周期函数
    clearInterval(this.myTimer)
  },
  methods: {
    timerFun() {
      this.stopTimer = false
      this.myTimer = setInterval(() => {
        // 停止定时器
        if (this.stopTimer == true) {
          clearInterval(this.myTimer)
          return
        }
        this.loadData()
      }, 5000)
    },
    loadData() {
      try {
        // 获取系统消息数量
        getRoute(store.state.user.token,this.$pubUrl + this.url.getNoticeNum)
          .then((res) => {
            console.log(res,'sdasdas');
            if (res.data.success) {
              this.msgTotal = res.data.total
              this.msg1Title = '通知(' + this.msgTotal + ')'
            }
          })
          .catch((error) => {
            this.stopTimer = true
          })
      } catch (err) {
        this.stopTimer = true
      }
    },
    fetchNotice() {
      this.loadding = true
      try {
        // 获取系统消息列表
        getRoute(store.state.user.token,this.$pubUrl + this.url.getPageList + `&type=${this.currentType}`)
          .then((res) => {
            this.loadding = false
            if (res.data.success) {
              this.noticeList = res.data.result.records || []
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch((error) => {
            this.loadding = false
          })
      } catch (err) {
        this.loadding = false
      }
    },
    toMyAnnouncement() {
      this.$router.push({
        path: '/account/notice',
      })
    },
    goDetail(item) {
      let id = item.relationId
      switch (item.source) {
        case '0':
          this.$router.push({
            path: '/repairDetail',
            query: {id}
          })
          this.updateStatus(item)
          break;
        case '1':
          this.$router.push({
            path: '/inspectionTaskDetail',
            query: {id}
          })
          this.updateStatus(item)
          break;
        case '4':
          this.$router.push({
            path: '/productTask/taskDetail',
            query: {taskId: id}
          })
          this.updateStatus(item)
          break;
        default:
          break;
      }
    },
    updateStatus(item) {
      getRoute(store.state.user.token,this.$pubUrl + this.url.updateStatus + '?ids=' + item.id)
          .then((res) => {
            if (res.data.success) {
              this.fetchNotice()
              this.loadData()
            }
          })
    },
    readAll() {
      getRoute(store.state.user.token,this.$pubUrl + this.url.readAll)
          .then((res) => {
            if (res.data.success) {
              this.fetchNotice()
              this.loadData()
            }
          })
    },
    handleHoverChange(visible) {
      if (visible) {
        this.currentType = ''
        this.fetchNotice()
      }
    },
    changeType(val) {
      this.currentType = val
      this.fetchNotice()
    },
  },
}
</script>

<style lang="css">
.header-notice-wrapper {
  top: 50px !important;
}
</style>
<style lang="less" scoped>
.header-notice {
  display: inline-block;
  transition: all 0.3s;

  span {
    vertical-align: initial;
  }
}
.notice-title {
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px #d9d9d9;
  margin: 0 -16px;
  padding: 0 16px 12px 16px;
}
.notice-tag {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 5px;
  background: #f4f5f6;
  margin-right: 18px;
  cursor: pointer;
}
.active-type {
  background: #1890FF;
  color: #fff;
}
.notice-cont-wrap {
  max-height: 400px;
  margin: 0 -16px;
  overflow-y: scroll;
  .notice-cont {
    padding: 12px 16px;
    border-bottom: solid 1px #d9d9d9;
    .notice-cont-tit {
      display: flex;
      justify-content: space-between;
    }
    .notice-cont-text {
      color: #191f25;
      font-size: 12px;
    }
  }
}
</style>